<template>
  <div class="talks_lf">
    <template v-for="item in talksList" :key="item.id">
      <TalksItem :talksItem="item" @click="toggleCommentInfo(item.id)" />
    </template>
  </div>
</template>

<script setup>
  import { onBeforeMount, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import TalksItem from '../childsComponents/TalksItem.vue'
  import { queryTalksListRequest } from '@/network/api/talks'
  const router = useRouter()
  const talksList = ref([])
  onBeforeMount(async () => {
    const result = await queryTalksListRequest()
    talksList.value = result.result
  })
  const toggleCommentInfo = id => {
    router.push(`/talks/talks_main/${id}`)
  }
</script>

<style lang="less" scoped>
  @media only screen and (min-width: 991px) {
    .talks_lf {
      width: 78%;
    }
  }
  @media only screen and (max-width: 990px) {
    .talks_lf {
      width: 100%;
    }
  }
</style>
